{{- $cdk8s_core_version := getenv "CDK8S_CORE_VERSION" }}
{{- $cdk8s_plusXX_MINUS_2_version := getenv "CDK8S_PLUSXX_MINUS_2_VERSION" }}
{{- $cdk8s_plusXX_MINUS_1_version := getenv "CDK8S_PLUSXX_MINUS_1_VERSION" }}
{{- $cdk8s_plusXX_version := getenv "CDK8S_PLUSXX_VERSION" }}
{{- $cdk8s_plusXX_MINUS_2 := getenv "CDK8S_PLUSXX_MINUS_2" }}
{{- $cdk8s_plusXX_MINUS_1 := getenv "CDK8S_PLUSXX_MINUS_1" }}
{{- $cdk8s_plusXX := getenv "CDK8S_PLUSXX" }}
{{- $cdk8s_cli_version := getenv "CDK8S_CLI_VERSION" }}

{{- $summary := .Site.Params.summary }}
{{- $footer_title := .Site.Params.footer_title }}
{{- $footer_subtitle := .Site.Params.footer_subtitle }}

{{- $docs_root := "docs/latest" }}

{{- $link_getting_started := (print $docs_root "/get-started") }}
{{- $link_plus_docs := (print $docs_root "/plus") }}
{{- $link_concepts := (print $docs_root "/basics") }}
{{- $link_examples := (print $docs_root "/examples") }}
{{- $link_contrib := (print $docs_root "/CONTRIBUTING") }}
{{- $link_constructs := "https://constructs.dev/search?q=&cdk=cdk8s&offset=0" }}
{{- $link_roadmap := "https://github.com/cdk8s-team/cdk8s/blob/master/ROADMAP.md" }}
{{- $link_github := "https://github.com/cdk8s-team/cdk8s" }}
{{- $link_slack := "https://cdk.dev" }}
{{- $link_license := "https://github.com/aws/aws-cdk/blob/master/LICENSE" }}
{{- $link_coc := "https://github.com/cncf/foundation/blob/master/code-of-conduct.md" }}
{{- $link_CNCF:= "https://www.cncf.io/" }}
{{- $link_privacy := "https://aws.amazon.com/privacy/?nc1=f_pr" }}
{{- $link_terms := "https://aws.amazon.com/terms/?nc1=f_pr" }}

{{- $link_cdk8s_ref := (print $docs_root "/reference/cdk8s/typescript") }}
{{- $link_plusXX_minus2_ref := (print $docs_root "/reference/cdk8s-plus-" $cdk8s_plusXX_MINUS_2 "/typescript") }}
{{- $link_plusXX_minus1_ref := (print $docs_root "/reference/cdk8s-plus-" $cdk8s_plusXX_MINUS_1 "/typescript") }}
{{- $link_plusXX_ref := (print $docs_root "/reference/cdk8s-plus-" $cdk8s_plusXX "/typescript") }}
{{- $link_cli := (print $docs_root "/cli") }}

{{- $everywhere := .Site.Params.features.everywhere }}
{{- $languages  := .Site.Params.features.languages  }}
{{- $imports  := .Site.Params.features.imports  }}
{{- $gitops  := .Site.Params.features.gitops  }}
{{- $community  := .Site.Params.features.community  }}

<!DOCTYPE html>

<html data-wf-page="5eb123ae928e7b2ea8221702" data-wf-site="5eb123ae928e7b1c2d221701">

<head>

    <meta charset="utf-8">

    <title>cdk8s</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">

    <meta name="description" content="{{ $summary }}">

    <!-- opengraph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://cdk8s.io" />
    <meta property="og:title" content="{{ .Site.Title }}" />
    <meta property="og:description" content="{{ $summary }}" />
    <meta property="og:image" content="https://cdk8s.io/images/opengraph.jpg" />

    <!-- twitter card -->
    <meta name="twitter:card" content="summary" />

    <link href="css/normalize.css" rel="stylesheet" type="text/css">
    <link href="css/webflow.css" rel="stylesheet" type="text/css">
    <link href="css/cdk8s.webflow.css" rel="stylesheet" type="text/css">
    <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>

    <script type="text/javascript">
        WebFont.load({
            google: {
                families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic", "Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic", "IBM Plex Serif:regular,700"]
            }
        });
    </script>

    <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
    <script type="text/javascript">
        ! function(o, c) {
            var n = c.documentElement,
                t = " w-mod-";
            n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
        }(window, document);
    </script>
</head>

<body class="body">
    <div class="hero">
        <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
            <div class="nav-container">
                <a href="index.html" class="w-nav-brand"><img src="images/logo.svg" width="120" alt="" class="image-3"></a>
                <nav role="navigation" class="nav-menu w-nav-menu">
                    <div data-hover="" data-delay="0" class="w-dropdown">
                        <div class="dropdown w-dropdown-toggle">
                            <div class="w-icon-dropdown-toggle"></div>
                            <div>Docs</div>
                        </div>
                        <nav class="dropdown-list w-dropdown-list">
                            <a href="{{ $docs_root }}" class="dropdown-link w-dropdown-link">Documentation</a>
                            <a href="{{ $link_getting_started }}" class="dropdown-link w-dropdown-link">Getting Started</a>
                            <a href="{{ $link_concepts }}" class="dropdown-link w-dropdown-link">Concepts</a>
                            <a href="{{ $link_plus_docs }}" class="dropdown-link w-dropdown-link">cdk8s+</a>
                        </nav>
                    </div>
                    <div data-hover="" data-delay="0" class="w-dropdown">
                        <div class="dropdown w-dropdown-toggle">
                            <div class="w-icon-dropdown-toggle"></div>
                            <div>Resources</div>
                        </div>
                        <nav class="dropdown-list w-dropdown-list">
                            <a href="{{ $link_examples }}" target="_blank" class="dropdown-link w-dropdown-link">Examples</a>
                            <a href="{{ $link_roadmap }}" target="_blank" class="dropdown-link w-dropdown-link">Roadmap</a>
                            <a href="{{ $link_contrib }}" target="_blank" class="dropdown-link w-dropdown-link">Contributors</a>
                            <a href="{{ $link_constructs }}" target="_blank" class="dropdown-link w-dropdown-link">More cdk8s libraries</a>
                        </nav>
                    </div>
                    <div data-hover="" data-delay="0" class="w-dropdown">
                        <div class="dropdown w-dropdown-toggle">
                            <div class="w-icon-dropdown-toggle"></div>
                            <div>API Reference</div>
                        </div>
                        <nav class="dropdown-list w-dropdown-list">
                            <a href="{{ $link_cdk8s_ref }}" class="dropdown-link w-dropdown-link">cdk8s  ({{ $cdk8s_core_version }})</a>
                            <a href="{{ $link_plusXX_minus2_ref }}" class="dropdown-link w-dropdown-link">cdk8s-plus-{{ $cdk8s_plusXX_MINUS_2 }}  ({{ $cdk8s_plusXX_MINUS_2_version }})</a>
                            <a href="{{ $link_plusXX_minus1_ref }}" class="dropdown-link w-dropdown-link">cdk8s-plus-{{ $cdk8s_plusXX_MINUS_1 }}  ({{ $cdk8s_plusXX_MINUS_1_version }})</a>
                            <a href="{{ $link_plusXX_ref }}" class="dropdown-link w-dropdown-link">cdk8s-plus-{{ $cdk8s_plusXX }} ({{ $cdk8s_plusXX_version }})</a>
                            <a href="{{ $link_cli }}" target="_blank" class="dropdown-link w-dropdown-link">cdk8s-cli ({{ $cdk8s_cli_version }})<a>
                        </nav>
                    </div>
                    <a href="{{ $link_github }}" target="_blank" class="github w-inline-block"><img src="images/git.png" alt=""></a>
                </nav>
                <div class="menu w-nav-button">
                    <div class="icon-2 w-icon-nav-menu"></div>
                </div>
            </div>
        </div>
      </div>
    <div class="intro">
        <div class="intro-wrapper">
            <h2 class="h2">{{ .Site.Params.subtitle }}<br></h2>
            <div class="text-block-2">
                {{ .Site.Params.description | markdownify }}
            </div>
        </div>
    </div>
    <div class="code"><img src="images/animation.gif" width="1400" alt="" class="code-image"></div>
    <div class="why">
        <h2 class="h2 white">Why should you use CDK for Kubernetes?<br></h2>
        <div class="wrappe">
            <div class="bulllet"><img src="images/1.png" width="300" alt="" class="bullet-image">
                <h3 class="small-title white">Harness the power of code</h3>
                <div class="bullet-text">Utilize code completion, loops, conditionals and testing for manifests, in your preferred programming language!<br></div>
            </div>
            <div class="bulllet"><img src="images/2_1.png" width="300" alt="" class="bullet-image">
                <h3 class="small-title white">Simplify application workflows</h3>
                <div class="bullet-text">Use the same programming language to build your application and its configuration<br></div>
            </div>
            <div class="bulllet"><img src="images/3.png" width="300" alt="" class="bullet-image">
                <h3 class="small-title white">Define best practices</h3>
                <div class="bullet-text">Deliver faster by composing and sharing reusable components through code libraries<br></div>
            </div>
        </div>
    </div>
    <div class="featues">
        <h2 class="h2">Features<br></h2>
        <div class="features-wrapper">

            <div class="feature">
                <div class="image-bg"><img src="images/5.png" alt="" class="feature-image"></div>
                <h4 class="small-title"><strong>{{ $everywhere.title }}</strong><br></h4>
                <div class="feature-text">{{ $everywhere.details | markdownify }}</div>
                <div class="logos">
                    <img src="images/gke.svg" alt="" class="icon">
                    <img src="images/eks.svg" alt="" class="icon">
                    <img src="images/ibm.svg" alt="" class="icon">
                    <img src="images/aks.svg" alt="" class="icon">
                </div>
            </div>

            <div class="feature low">
                <div class="image-bg"><img src="images/4.png" alt="" class="feature-image"></div>
                <h4 class="small-title"><strong>{{ $languages.title }}</strong><br></h4>
                <div class="feature-text">{{ $languages.details | markdownify }}</div>
                <div class="logos">
                    <img src="images/ts.png" alt="" class="icon">
                    <img src="images/py.png" alt="" class="icon">
                    <img src="images/js.png" alt="" class="icon">
                    <img src="images/java.png" alt="" class="icon">
                    <img src="images/go.png" alt="" class="icon">
                    <!--
                    <img src="images/csharp.png" alt="" class="icon">
                    -->
                </div>
            </div>

            <div class="feature">
                <div class="image-bg"><img src="images/3_1.png" width="80" alt="" class="feature-image"></div>
                <h4 class="small-title"><strong>{{ $imports.title }}</strong><br></h4>
                <div class="feature-text">{{ $imports.details | markdownify }}</div>
            </div>
            <div class="feature low">
                <div class="image-bg"><img src="images/2.png" width="80" alt="" class="feature-image"></div>
                <h4 class="small-title"><strong>{{ $gitops.title }}</strong><br></h4>
                <div class="feature-text">{{ $gitops.details | markdownify }}</div>
            </div>

            <div class="feature">
                <div class="image-bg"><img src="images/1_1.png" width="80" alt="" class="feature-image"></div>
                <h4 class="small-title"><strong>{{ $community.title }}</strong><br></h4>
                <div class="feature-text">{{ $community.details | markdownify }}</div>
            </div>
        </div>
    </div>
    <div class="cta">
        <h2 class="h2">{{ $footer_title }}<br></h2>
        <div class="text-20">{{ $footer_subtitle }}<br></div>
        <a href="{{ $link_getting_started }}" target="_blank" class="button w-inline-block">
            <div>Get started</div>
        </a>
    </div>
    <div class="div-block">
        <div id="cncf_text"><h2 class="h2.white">cdk8s is a <a href="{{ $link_CNCF}}">Cloud Native Computing Foundation</a> Sandbox Project<br></h2></div>
        <div class="cncf-logo"></div>
    </div>
    <div class="footer">
        <div class="wrappe _1">
            <div class="footer-col">
                <a href="index.html" aria-current="page" class="logo w-inline-block w--current"><img src="images/logo-white.png" srcset="images/logo-white.png 500w, images/logo-white.png 800w, images/logo-white.png 1088w" sizes="(max-width: 479px) 100vw, (max-width: 991px) 140px, 200px" alt=""></a>
            </div>

            <div class="footer-col">
                <h1 class="footer-title">DOCS</h1>
                <a href="{{ $docs_root }}" class="footer-link">Documentation</a>
                <a href="{{ $link_getting_started }}" class="footer-link">Getting Started</a>
                <a href="{{ $link_concepts }}" class="footer-link">Concepts</a>
                <a href="{{ $link_plus_docs }}" class="footer-link">cdk8s+</a>
            </div>

            <div class="footer-col">
                <h1 class="footer-title">MORE RESOURCES</h1>
                <a href="{{ $link_examples }}" target="_blank" class="footer-link">Examples</a>
                <a href="{{ $link_roadmap }}" target="_blank" class="footer-link">Roadmap</a>
                <a href="{{ $link_contrib }}" target="_blank" class="footer-link">Contributing</a></div>
            <div class="footer-col">
                <h1 class="footer-title">CONNECT WITH US
                    <a href="{{ $link_github }}"><br></a>
                </h1>
                <div class="link-block">
                    <a href="{{ $link_github }}" target="_blank" class="footer-link">
                        <img src="images/git-small.png" alt="" class="link-icon"> Github
                    </a>
                </div>
                <div class="link-block">
                    <a href="{{ $link_slack }}" target="_blank" class="footer-link">
                        <img src="images/slack.png" alt="" class="link-icon"> Slack
                    </a>
                </div>
            </div>
        </div>
        <div class="footer-div-block">
            <div class="credits">
              Made with ❤️ at AWS
              <div class="text-block-3">
                <br>Copyright © 2021 cdk8s Project Authors | Documentation Distributed under CC-BY-4.0
                <br>The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage">Trademark Usage</a> page
             </div>
            </div>
            <div class="text-block-3">
              <a class="footer-link" href="{{ $link_privacy }}">Privacy</a> | <a class="footer-link" href="{{ $link_terms }}">Site Terms</a>
            </div>
        </div>
    </div>
    <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5eb123ae928e7b1c2d221701" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="js/webflow.js" type="text/javascript"></script>
</body>

</html>
